<template>
	<view class="container">
		<view class="formBox">
			<uni-forms ref="form" :modelValue="FormData">
				<block v-for="(item, index) in FormData.list" :key="index">
					<view class="box" v-if="item.customer_type == 2">
						<view class="top">
							<view class="formTitle">同住人{{ index }}</view>
							<view class="del" @click="del(index)">删除</view>
						</view>
						<uni-forms-item required label="姓名" :name="['list', index, 'customer_name']" :rules="[{ required: true, errorMessage: '请填写姓名' }]">
							<uni-easyinput type="text" v-model="item.customer_name" :clearable="false" placeholder="请输入名字" />
						</uni-forms-item>
						<uni-forms-item
							required
							label="手机号"
							:name="['list', index, 'customer_mobile']"
							:rules="[
								{ required: true, errorMessage: '请填写手机号' },
								{
									pattern: '^1[3-9]\\d{9}$',
									errorMessage: '请填写正确的手机号'
								}
							]"
						>
							<uni-easyinput type="number" v-model="item.customer_mobile" :clearable="false" placeholder="请输入手机号" />
						</uni-forms-item>
						<uni-forms-item label="证件号">
							<uni-easyinput type="idcard" v-model="item.customer_idcard" :clearable="false" placeholder="请输入身份证号" />
						</uni-forms-item>
					</view>
				</block>

				<view class="btns">
					<button class="btn" type="default" @click="add">同住人加一</button>
					<button class="btn" type="primary" @click="submit">确 定</button>
				</view>
			</uni-forms>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			FormData: {
				list: []
			}
		};
	},
	onLoad(e) {
		this.FormData.list = JSON.parse(e.data);
		if (this.FormData.list.length < 2) {
			this.add();
		}
	},
	methods: {
		add() {
			const data = {
				customer_type: 2,
				customer_name: '',
				customer_mobile: '',
				customer_idcard: ''
			};
			this.FormData.list.push(data);
		},
		del(index) {
			this.FormData.list.splice(index, 1);
		},
		submit() {
			this.$refs.form.validate().then((res) => {
				let pages = getCurrentPages();
				let prevPage = pages[pages.length - 2];
				let object = this.FormData.list;
				prevPage.$vm.togetherUpdate(object);
				uni.navigateBack();
			});
		}
	}
};
</script>

<style lang="scss">
.formBox {
	.box {
		.top {
			display: flex;
			justify-content: space-between;
			.del {
				margin-top: 30rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				color: $uni-error;
			}
		}
	}
}
</style>
